import { FC, useState } from 'react';
import { Button, Modal, Checkbox, message } from 'antd';
import { TaskParams } from '@/types/task';
import SvgIcon from '@/components/svg-icon/SvgIcon';
import styles from '../../../pages/miner/minerModal.module.less';
import { fetchCommit } from '@/service/commit';

interface IGroupMoveModal {
  mutateMiner: () => void;
  visible: boolean;
  setVisible: (flag: boolean) => void;
  paramsRef: React.MutableRefObject<TaskParams | undefined>;
}

const GroupMoveModal: FC<IGroupMoveModal> = (props) => {
  const { paramsRef, mutateMiner } = props;
  const line2Text = `操作成功，请设置相关矿机的应用类型`;

  const [isGroupConfig, setIsGroupConfig] = useState(true);
  const [isGroupOverclocking, setIsGroupOverclocking] = useState(true);

  const handleUseConfig = () => {
    if (isGroupConfig || isGroupOverclocking) {
      fetchCommit(4, [
        {
          monitor: paramsRef.current?.monitor,
          miners: paramsRef.current?.miners,
        },
      ])
        .then((res) => {
          props.setVisible(false);
          if (res.data.code === 0) {
            message.success('指令下发成功');
          }
        })
        .finally(() => {
          mutateMiner();
        });
    } else {
      props.setVisible(false);
      mutateMiner();
    }
  };
  return (
    <Modal
      title={null}
      centered
      visible={props.visible}
      closable={false}
      footer={null}
    >
      <div
        className={`flex flex-col ai-center text-center ${styles.groupModalWrap}`}
      >
        <SvgIcon symbol="icon-gouxuanzhong" color="#00D97D" size={40} />
        <p className={styles.mainText}>{line2Text}</p>
        <div className={styles.checkboxWrap}>
          <Checkbox
            key="GroupConfig"
            checked={isGroupConfig}
            onChange={(e) => setIsGroupConfig(e.target.checked)}
          >
            应用分组配置
          </Checkbox>
          <Checkbox
            key="GroupOverclocking"
            checked={isGroupOverclocking}
            onChange={(e) => setIsGroupOverclocking(e.target.checked)}
          >
            应用分组超频
          </Checkbox>
        </div>
      </div>
      <div className={styles.groupModalBtnWrap}>
        <Button block type="primary" onClick={() => handleUseConfig()}>
          确定
        </Button>
      </div>
    </Modal>
  );
};

export default GroupMoveModal;
